【第400期】网页版简历制作经验分享

前言

最近看个大公司都在校招，又要涉及到简历是打印版还是在线版的问题了。而且面试官在面试的时候一般都会聊到有没有项目经验，那满多人就直接利用自己所学的做一份网页版的简历，那今天我们就来看看作者关于这一块有哪些经验跟注意点分享的。

正文从这开始！

2012年中，因为换工作面试的需要，我得更新旧的简历。但是在Word中排版实在是各种不顺手，于是就发挥了作为前端工程师的优势把简历做成了网页；2014年末想换工作时又对其进行了改版。这份简历曾经受到好几位HR和猎头的好评，所以特地分享制作经验，也算是给想换工作的同行参考。

进入正题之前，先想想HTML简历的好处：

1）无须下载，直接打开。

2）可以采用更丰富的设计和更灵活的排版。

3）可以通过超链接访问其他资源。

4）可以顺带展示自己设计以及前端方面的技能。

而在此基础上，我还给这份简历定下了以下目标：

1）在一个页面中展示所有内容。

2）Write once, run anywhere. 兼容PC设备与移动设备，最好还能直接打印。

3）简单实用，最好连JS都不用写。那些用上了各种动画做出来的甚至是做成了小游戏的炫酷简历，其实并不利于阅读。

好了，下面具体讲讲如何打造这样一份简历。

设计

很多程序员会喊：“我是写代码的，不懂设计。”但俗话说得好：没吃过猪肉，总见过猪跑吧。平时逛这么多网站，难道没有几个特别顺眼的？现在浏览器的开发工具非常先进，看上哪个直接扒过来“参考”就行。像简历这种简单页面也不需要先做PSD稿，构思好之后直接写HTML和CSS更为方便。

设计时应尽量使用图形、图像表达内容，这是因为相比大段的文字，人更喜欢看图。这里也贴一下我简历中其中一节改版前后的对比（左旧右新）：

相比左侧大段密密麻麻的文字，右侧的柱状图让人一眼就能看清技能水平。

字体大小

这年头显示器越来越大，相对地文字就越来越小，现在大部分网站都把标准文字大小设为14px。考虑到简历的内容不多，排版可以宽松一些，因此建议把标准文字大小设为16px，这在屏幕尺寸较小的移动设备上看起来也不会那么吃力。

关于兼容

简历的受众是谁？无非是两类人：HR以及技术工程师。可以确定的是，技术工程师基本上是用Chrome或者Firefox的好同志，并且非常鄙视IE。HR常年耳濡目染，也会逐渐地换上新的浏览器。然而，考虑到那小部分的HR以及极小部分的技术工程师的感受，还是准备一段“温馨”的提示吧：

实现方法很简单，通过条件注释对IE 9.0以下版本的浏览器，直接用iframe套个提示页面去把原页面挡住：

为什么连IE8也要抛弃呢？这是因为它不支持Media query以及一些CSS 3样式，而这恰好是后面说到的多设备适配所必须要用到的技术。

加密联系方式

这一步主要是为了避免被各种骚扰电话、垃圾邮件的扫号软件扫到，这里说的加密并不需要做得很复杂，只要稍微加一点干扰因素即可。比如你的QQ号是1234567，那么在网页上可以这样输出：

至于邮件地址则可以这样（以 [e-mail] 为例）：

电话号码是比较敏感的信息，可以搞复杂点，这里我采用的是base64方案。可能很多朋友还不知道，稍微先进点的浏览器都已经原生支持base64的编码和解码了，分别是调用window.btoa和window.atob两个函数。所以电话号码可以这样输出（以 13800138000 为例）：

再者，我并不想任何人都能看到我的电话号码，所以还可以加点限制。比如URL带有某个参数才显示电话号码：

适配PC与移动设备

首先，通过Media query在不同的宽度下采用不同的布局。

其次，市场上Retina屏幕的设备（如大部分iPad、部分Macbook、大部分手机）越来越多，像图片这些非矢量内容在这些屏幕上会因为被拉大而失真。所以，在准备内容图片的时候，最好是做成实际显示尺寸的两倍，再通过CSS缩小。而对于装饰性质的小图标，可以用两倍大小的图片（通过background-size缩小），也可以用字体图标。这里我不建议用SVG，因为它的性能比较差，在移动设备上打开会明显地卡了一下。

最后，不要忘了贴上个二维码，方便移动设备扫码访问。

做好这一步，就可以带着iPad去面试了。

打印

其实打印机也是一种设备，按理说这部分内容应该跟上一节放一起的，但是打印设备的情况比较特殊，而且有不少坑，所以就单独作为一节。

打印设备特殊在哪呢？A4纸的尺寸是宽21cm、高29.7cm，但是我用Chrome把页面存成PDF（在打印的界面可以存）之后，看到的分辨率是宽595px、高842px。这到底是怎么算的呢？研究了一番之后发现这是按72ppi（PixelsPer Inch，即一英寸所含的像素数）换算的：

按照Media query的规则，这个宽度在打印的时候明显是进入了手机设备的布局。而16px大小的文字打印出来之后的大小就是：

这文字明显太大了，所以得缩：

可这缩了之后，内容相对变小，再用原来小宽度的布局就不合适了，反而是大宽度的布局更好，于是就有了这样的代码：

然后坑来了，这里的Media query表达的并非“不是打印设备并且宽度不超过639px”，而是“不是宽度不超过639px的打印设备”。（关于这一点可以看看Mozilla的解释说明）

这个小问题难不倒我们，把代码改成嵌套的Media query：

本来以为问题已经解决，但是用微信扫一扫后发现样式异常。原来手机QQ浏览器的内核还不支持嵌套的Media query，顺带查了一下，IE系列全部浏览器也不支持这项特性。

被折腾地没办法了，最后乖乖地写了两个CSS：

接下来再研究一下打印的样式要怎么写。首先是 @page ，可以用来修改页面容器的版式，最常用的是指定页面的尺寸及边距：

其次，某些浏览器默认是不打印背景色和背景图片的，这样一来背景小图标就没了。对于Chrome，可以加上这段CSS代码强制打印背景：

再次，要处理链接。要知道打印出来之后，用手指往纸上戳是戳不开网页的。所以诸如“在线地址”、“个人博客”这样的文字链接要么隐藏，要么把链接地址也打印出来。要显示链接地址可以这么写：

此外，纸质简历的篇幅不宜过长，可以选择性地隐藏一些内容。比如黑白打印的简历可以忽略图片：

最后，大家还要记住一个前提，以上这些都是不兼容IE 6、IE7、IE 8的，但是落后的打印店可能用的还是XP系统，所以输出个PDF去打印是比较保险的。

简历做完以后

先用各种浏览器看一下有没有露馅，不过更重要的是：请阅读你的简历至少10遍。程序员的表达能力普遍不强，在这个过程中，你可以发现：

1）各种错别字。比如把“登录”写成了“登陆”。

2）各种错误术语。比如把“jQuery”写成了“JQuery”，把“iOS”写成了“IOS”。

3）各种语句不通。

4）各种表达累赘。

至于放置简历的服务器，可以用Github pages，也可以每年花￥100多租个虚拟主机。

成功换工作以后

当你在新公司完成一个有价值的项目时，请及时更新你的简历。为何？因为此时你对项目的记忆最深，要是等到想再跳槽的时候再更新简历，往往在那时候忘记了项目的许多细节。

后语

这次在校招面试的过程中就有不少学生问，我对前端很有激情，可我现在就是没什么经验，不知道从哪里获得？

通过上面这个，还会觉得不知道从哪里学到经验了吗？

关于

作者：@heeroluo

原文链接：http://www.heeroluo.net/article/detail/127/experience-of-building-web-cv

长按图片识别图中二维码

早读君有一个福建的前端群，时不时的有人找前端外包，比如做微信开发啦，做静态页切图啦，等等。这些不知道如何？